<template>
  <div class="bg">
    <div class="leftPart">
      <Row class="rowOne">
        <Col span="12" style="text-align: left;">
          <Input v-model="pageObj.label_uuid_properties_plike" placeholder="搜索名称......" style="width: 300px;margin-left: 0px;" @on-enter="doSearch"/>
        </Col>
      </Row>
      <Table :loading="spinShow" border :columns="columns" :data="table" ref="table"
             @on-selection-change="tableCheckbox" height="820"></Table>
      <Row style="text-align:right;padding:10px 0;">
        <Page :total="total" size="small" show-elevator :page-size="pageObj.size" @on-change="pageChange"
              @on-page-size-change="pageSizeChange"></Page>
      </Row>
    </div>
    <div class="rightPart">
      <Row class="rowOne">
        <Col span="24" style="text-align: right">
        </Col>
      </Row>
      <Row class="rowTwo">
          <SelectPanel @tell-refresh="loadTableDatas"></SelectPanel>
      </Row>
    </div>
    <Drawer title="修改组态设备数据" :closable="false" v-model="drawerShow" width="400" @on-close="closeDrawer">
      <Form :model="editObj" label-position="left" :label-width="100" :rules="ruleInline" ref="editObj">
        <FormItem label="名称" prop="label">
          <Input v-model="editObj.label"></Input>
        </FormItem>
        <FormItem label="组态ID">
          <Input v-model="editObj.uuid"></Input>
        </FormItem>
        <FormItem label="设备名" prop="devName">
          <Input v-model="editObj.devName"></Input>
        </FormItem>
        <Divider>属性·别名</Divider>
        <Input v-model="item.alias" v-for="(item, index) in editObj.oriArr" :key="index"
               style="margin-top: 5px;margin-bottom: 10px;">
          <span slot="prepend">{{item.ori}}</span>
        </Input>
        <!--<FormItem label="设备属性" prop="properties">
          <Input v-model="editObj.properties"></Input>
        </FormItem>-->
      </Form>
      <Row :gutter="20">
        <Col span="12">
          <Button type="success" long @click="doSave" :loading="updingLoading">保存</Button>
        </Col>
        <Col span="12">
          <Button type="default" long @click="closeDrawer">取消</Button>
        </Col>
      </Row>
    </Drawer>
  </div>
</template>

<script>
  import SelectPanel from './SelectPanel'
  export default {
    name: 'BigDevice',
    components: {SelectPanel},
    mounted: function () {
      this.loadTableDatas()
    },
    data () {
      return {
        ruleInline: {
          label: [
            {required: true, message: '必填', trigger: 'blur'}
          ],
          devName: [
            {required: true, message: '必填', trigger: 'blur'}
          ]
        },
        drawerShow: false,
        updingLoading: false,
        targetObj: {
          label: '',
          devices: []
        },
        data: [],
        table: [],
        columns: [
          {
            title: '编号',
            key: 'id',
            width: 60,
            align: 'center'
          },
          {
            title: '名称',
            key: 'label',
            width: 100,
            align: 'center'
          },
          {
            title: '组态ID',
            key: 'uuid',
            width: 150,
            ellipsis: true,
            tooltip: true,
            align: 'center'
          },
          {
            title: '设备名',
            key: 'devName',
            width: 150,
            ellipsis: true,
            tooltip: true,
            align: 'center'
          },
          {
            title: '设备属性',
            key: 'properties',
            ellipsis: true,
            tooltip: true,
            align: 'center'
          },
         {
            title: '操作',
            key: 'action',
            width: 200,
            align: 'center',
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'info',
                    ghost: true,
                    size: 'small',
                    icon: 'ios-create-outline'
                  },
                  style: {
                    margin: '2px'
                  },
                  on: {
                    click: () => {
                      this.editObj = {}
                      // 把数据放进到 右边框中
                      this.drawerShow = true
                      this.editObj = JSON.parse(JSON.stringify(params.row))
                      // 拆分属性
                      this.editObj.oriArr = this.editObj.properties.split('_').map(item => {
                        let doSplit = item.split('|')
                        return {ori: doSplit[0], alias: doSplit.length > 1 ? doSplit[1] : ''}
                      })
                    }
                  }
                }, '编辑'),
                h('Button', {
                  props: {
                    type: 'error',
                    ghost: true,
                    size: 'small',
                    icon: 'ios-trash-outline'
                  },
                  style: {
                    margin: '2px'
                  },
                  on: {
                    click: () => {
                      this.$Modal.confirm({
                        title: '确认删除',
                        content: '您确定删除该数据吗?',
                        onOk: () => {
                          this.doDelete(params.row.id)
                        },
                        okText: '确定',
                        cancelText: '取消',
                        onCancel: () => {
                        }
                      })
                    }
                  }
                }, '删除')
              ])
            }
          }
        ],
        pageObj: {
          page: 0,
          size: 20,
          label_uuid_plike: ''
        },
        spinShow: false,
        total: 0,
        editObj: {}
      }
    },
    methods: {
      loadTableDatas: function () {
          this.spinShow = true
         window.myapi.config_dev_list(this.pageObj).then(resp => {
           this.table = resp.data.data.content
           this.total = resp.data.data.totalElements
        }).finally(() => {
          this.spinShow = false
        })
      },
      pageSizeChange: function (index) {
        console.log(index)
      },
      pageChange: function (index) {
        this.pageObj.page = index - 1
        this.loadTableDatas()
      },
      tableCheckbox: function (selection) {
        console.log('selections', selection)
      },
      doSearch: function () {
        this.pageObj.page = 0
        this.loadTableDatas()
      },
      doDelete: function (id) {
        window.myapi.do_del('condev/del', [id]).then(resp => {
          if (resp.status === 200 && resp.data.status === 200) {
            this.$Notice.success({
              title: '提示',
              desc: resp.data.msg
            })
            this.loadTableDatas()
          }
        }).finally(() => {
        })
      },
      doSave () {
        this.$refs['editObj'].validate((valid) => {
          if (valid) {
            this.editObj.properties = this.editObj.oriArr.map(item => {
              return item.ori + (item.alias !== '' ? ('|' + item.alias) : '')
            }).join('_')

            this.updingLoading = true
            window.myapi.config_dev_save('condev/upd', this.editObj, 'PUT').then(resp => {
              if (resp.status === 200 && resp.data.status === 200) {
                this.closeDrawer()
                this.loadTableDatas()
                this.$Notice.success({
                  title: '提示',
                  desc: '操作成功'
                })
              }
            }).finally(() => {
              this.updingLoading = false
            })
          } else {
            this.$Message.error('请按要求填写')
          }
        })
      },
      closeDrawer () {
        this.drawerShow = false
      }
    }
  }
</script>

<style scoped>

  .bg {
    display: flex;
    min-height: 960px;
  }

  .leftPart {
    flex: 2;
    padding: 10px 5px;
  }

  .rightPart {
    flex: 2;
    padding: 40px 30px 10px 30px;
  }

  .rowOne {
    margin-bottom: 20px;
  }

  .rowTwo {
    margin-bottom: 50px;
  }

  .rowThree {
    margin-bottom: 10px;
  }

  .butt {
    margin-right: 50px;
    width: 300px;
  }
</style>
